<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS3文本遮盖特效</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        background: black;
        overflow: hidden;
    }

    h1 {
        font-size: 60px;
        color: white;
        line-height: 100vh;
        /*width: 1ch;*/
        /*文本不能被选中*/
        user-select: none;
        position: relative;
    }

    h1:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 100%);
        left: 0;
        transition: all 2.5s;
        animation: drawer 2.5s infinite;
    }
    h1:hover:after{
        left: 100%;
    }
    @keyframes drawer {
        to{
            left: 100%;
        }
    }
    h1:hover span{
        cursor: pointer;
        font-size: 80px;
        transition: all 0.2s;
    }
    h1:hover span:nth-of-type(1){
        transition-delay: 0.1s;
    }
    h1:hover span:nth-of-type(2){
        transition-delay: 0.2s;
    }
    h1:hover span:nth-of-type(3){
        transition-delay: 0.3s;
    }
    h1:hover span:nth-of-type(4){
        transition-delay: 0.4s;
    }
    h1:hover span:nth-of-type(5){
        transition-delay: 0.5s;
    }
    h1:hover span:nth-of-type(6){
        transition-delay: 0.6s;
    }
    h1:hover span:nth-of-type(7){
        transition-delay: 0.7s;
    }
    h1:hover span:nth-of-type(8){
        transition-delay: 0.8s;
    }
    h1:hover span:nth-of-type(9){
        transition-delay: 0.9s;
    }
    h1:hover span:nth-of-type(10){
        transition-delay: 1.0s;
    }
    h1:hover span:nth-of-type(11){
        transition-delay: 1.1s;
    }
    h1:hover span:nth-of-type(12){
        transition-delay: 1.2s;
    }
    h1:hover span:nth-of-type(13){
        transition-delay: 1.3s;
    }
    h1:hover span:nth-of-type(14){
        transition-delay: 1.4s;
    }
    h1:hover span:nth-of-type(15){
        transition-delay: 1.5s;
    }
    h1:hover span:nth-of-type(16){
        transition-delay: 1.6s;
    }
    h1:hover span:nth-of-type(17){
        transition-delay: 1.7s;
    }

    h1:hover span:nth-of-type(18){
        transition-delay: 1.8s;
    }
    span:first-child {
        color: purple;
    }
</style>
<body>
<h1>
  <span>B</span>
  <span>i</span>
  <span>l</span>
  <span>i</span>
  <span>B</span>
  <span>i</span>
  <span>l</span>
  <span>i</span>
  <span>&nbsp;</span>
  <span>C</span>
  <span>S</span>
  <span>S</span>
  <span>&nbsp;</span>
  <span>S</span>
  <span>t</span>
  <span>u</span>
  <span>d</span>
  <span>y</span>
</h1>
</body>
</html>